<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>
高亮Markdown中的代码 |
穷折腾</title>
	<link rel="stylesheet" href="/static/css/style.css" />
	<link rel="stylesheet" href="/static/css/pygments.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://zqqf16.info/rss.xml" />
	
</head>
<body>
    <div id="container">
      <div id="main" role="main">
        <header>
		<h1>
高亮Markdown中的代码
</h1>
		</header>

     <nav>
		<span><a title="home page" class="" href="/">home</a></span>
        <span><a href="/pages/about.html" title="关于">关于</a></span>
     </nav>

     <article class="content">
        <section class="post">
            
		<p>Markdown语法标准中并没有一种方法来标明代码语言的种类。所以要想用Javascript来进行代码高亮的话就需要手动加一些类似于<code>&lt;code class="python"&gt;</code>的HTML标签，显得十分Ugly。</p>

<p>于是乎想从Server端入手，想到了Pygments这个神器。但问题又来了。。。</p>

<p>初步打算用</p>

<pre><code>```python
print 'hello'
```
</code></pre>

<p>这样的方式来指明代码种类。先把代码段用正则匹配出来，根据语言种类调用Pygments进行着色。然后再把其它部分连同着色后的的代码段一起Markdown转换。</p>

<p>后来越想越觉得不太靠谱，还是有点Ugly。</p>

<p>于是乎继续Google，终于发现了一个完美的方法，并对Markdown2刮目相看。</p>

<p>一直用Markdown2这个Python写的解释器来转换Markdown脚本，之前光看名字还觉得这玩意是个山寨货。今天研究发现，这货还挺好用。</p>

<p>Markdown2提供了一个代码高亮的扩展：<a href="https://github.com/trentm/python-markdown2/wiki/fenced-code-blocks">fenced code blocks</a>, 它能自动匹配这样的代码，并调用Pygments进行着色。</p>

<pre><code>```python
print "hi"
```
</code></pre>

<p>使用方法也很简单：</p>

<div class="codehilite"><pre><code><span class="n">html</span> <span class="o">=</span> <span class="n">markdown2</span><span class="o">.</span><span class="n">markdown</span><span class="p">(</span><span class="s">&quot;some markdown&quot;</span><span class="p">,</span> <span class="o">...</span><span class="p">,</span> <span class="n">extras</span><span class="o">=</span><span class="p">[</span><span class="s">&quot;fenced-code-blocks&quot;</span><span class="p">])</span><br \></code></pre></div>

<p>问题圆满解决~</p>

<p>更多Markdown2扩展请参考<a href="https://github.com/trentm/python-markdown2/wiki/Extras">Wiki</a></p>

	</section>
	<section class="meta">
		<span class="tags">Tagged by 
			<a href="/tags/python">python</a>
		</span>

		<span class="time">&nbsp;<time datetime="2013-04-26">2013-04-26</time></span>
	</section>
<hr/>

<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = 'zqqf16';
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>


        </section>
     </article>
	 <div id="copy">&copy; Powered by <a href="https://github.com/zqqf16/zqqf16.github.com" title="Peanut">Peanut</a> | Themed by <a href="http://lhzhang.com" title="sext ii">sext ii</a></div>
      </div>
    </div> <!--! end of #container -->
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F0100dcff30150b1fe336a8b5d0d50684' type='text/javascript'%3E%3C/script%3E"));
    </script>
  </body>
</html>
